<template>
  <div class="list-item-container">
    <div class="box">
      <image
        class="pro-img"
        src="https://gw.alicdn.com/tfscom/i4/O1CN01Ij5Z421cBRihslor8_!!6000000003562-0-alipicbeacon.jpg_300x300.jpg"
        mode="widthFix"
      ></image>
      <div class="good_title">
        司法考试打开链接福克斯的封建时代反击的士大夫都是开发就开始看的放款
      </div>
      <div class="good_price">
        <div class="xs-price">￥0.01</div>
        <div class="ys-price">￥10.00</div>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="scss">
.list-item-container {
  border-radius: 10px;
  overflow: hidden;

  background-color: #fff;
  height: 500px;
  .box {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    .pro-img {
      width: 100%;
      height: 250px;

      image {
        width: 100%;
        height: 50%;
        border-radius: 18rpx 18rpx 0 0;
      }
    }

    .good_title {
      font-size: 30px;
      margin-top: 25px;
      font-weight: 700;
      color: #15181d;
      padding: 0 10px;
      text-align: center;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .good_price {
      padding: 0 20px;
      margin-top: 15px;
      display: flex;
      align-items: center;
      .xs-price {
        color: red;
        font-size: 32px;
        font-weight: 700;
      }
      .ys-price {
        text-decoration: line-through;
        margin-left: 15px;
        font-size: 26px;
      }
    }
  }
}
</style>
